<template>
  <div>
    <el-table :data="this.order.records" border style="width: 100%">
      <el-table-column prop="id" label="订单号" width="180"/>
      <el-table-column prop="sumPrice" label="订单总价"/>
      <el-table-column prop="status" label="订单状态"/>
      <el-table-column prop="orderDate" label="下单时间"/>

      <el-table-column label="订单详情">
        <template #default="scope">
          <el-button
              size="small"
              type="primary"
              @click="findByOrderId(scope.row)">查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:currentPage="order.current"
        v-model:page-size="order.size"
        background
        layout="prev,pager, next,jumper"
        :total="order.total"
        @current-change="cutByItem(order.current)"
    />

    <el-row>
      <el-col :span="3">
        订单状态：
      </el-col>
      <el-col :span="4">
        <el-select v-model="paramObj.status" class="m-2" placeholder="请选择">
          <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="3">
        下单起始日期：
      </el-col>
      <el-col :span="4">
        <el-input v-model="paramObj.startDate"></el-input>
      </el-col>
      <el-col :span="3">
        下单结束日期：
      </el-col>
      <el-col :span="4">
        <el-input v-model="paramObj.endDate"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="cutByItem(1)">查询</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      order: {},
      paramObj: {},
      status: [{value: null, label: "不限"}, {value: "未发货", label: "未发货"},
        {value: "发货中", label: "发货中"}, {value: "已完结", label: "已完结"},],
    }
  },
  created() {
    this.cutByItem(1);
  },
  methods: {
    cutByItem(pageNO) {
      this.paramObj.pageNO = pageNO;
      axios.get("/project/order/cutByItem", {params: this.paramObj}).then(resp => {
        this.order = resp.data;
      })
    },
    findByOrderId(orderObj) {
      this.$router.push({name: "ManageSingleOrder", query: {orderId: orderObj.id}});
    },
  }
}

</script>

<style scoped>

</style>